<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>主界面</title>
		<link rel="stylesheet" href="css/common.css" />
		<link rel="stylesheet" href="css/mui.min.css" />
		<link rel="stylesheet" href="css/mui.picker.min.css" />
		<link rel="stylesheet" href="css/swiper.css" />
		<link rel="stylesheet" href="css/lCalendar.css">
		<link rel="stylesheet" type="text/css" href="css/xiaoma.css"/>
		<link rel="stylesheet" type="text/css" href="css/querendingdan.css"/>
		<script>
			var iScale = 1;
			iScale = iScale / window.devicePixelRatio;
			document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=' + iScale + ',minimum-scale=' + iScale + ',maximum-scale=' + iScale + '">')
		</script>
		<!--动态设置文字大小-->
		<script>
			var iWidth = document.documentElement.clientWidth;
			document.getElementsByTagName('html')[0].style.fontSize = iWidth / 15 + 'px';
		</script>
		<style type="text/css">
            #main-body{
            	margin-top: 1.8rem;
            }
            .content-slide{
            	width:100%;
            	margin:0 auto;
            	background-color: #eeeeee;
            }
            .news-list li{
            	margin:0 auto;
            	background-color:#f0f0f0;
            	border-bottom: 0.1rem solid #f8f8f8;
            }
            li strong{
            	display:inline-block;
            	font-size:0.65rem;
            	word-wrap:break-word;
            	margin-left:1rem;
            	margin-top:1rem;
            	line-height:0.8rem;
            	width:2.8rem;
            }
            li p{
            	word-wrap:break-word;
            	line-height:0.6rem;
            	display:inline-block;
            	margin-left: 0.5rem;
            	font-size: 0.5rem;
            	width:6rem;
            	height: 1.5rem;
            }
            li img{
            	display:inline-block;
				margin-left: 2.5rem;
				width:0.4rem;
				height:0.6rem;
			}
			.addmenu{
				margin-top:2rem;
				margin-left:33.3%;
				width: 4rem;
				height: 4rem;
			}
			#menupopup,#errorpopup,#logoutpopup{
				position: fixed;
				top: 1.8rem;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0,0,0,0.5);
				z-index: 110;
				display: none;
			}
			#popup-main,#logout-main{
				position: absolute;
				top: 6rem;
				left: 0.8rem;
				width: 13.4rem;
				height:7.5rem;
				background: #FFFFFF;
			}
			.popup-head,.logout-head{
				width: 100%;
				height:1.6rem;
				border-bottom: 0.02rem  solid #999999;
			}
			.popup-head img,.logout-head img{
				width:0.8rem;
				height:0.8rem;
				float: left;
				margin-left: 0.2rem;
				margin-top: 0.4rem;
			}
			.popup-head span,.logout-head span{
				display: inline-block;
				font-size:0.6rem;
			    color: #202020;
			    margin-top: 0.65rem;
			    margin-left: 0.2rem;
			    letter-spacing: 0.04rem;
			}
			.popup-main,.logout-main{
				height: 4rem;
				width: 8.8rem;
				margin:0 1.9rem;
				font-size:0.6rem;
			}
			.popup-main ul li,.logout-main ul li{
				height:2rem;
				width: 100%;
				border-bottom: 0.02rem  solid #999999;
				font-size: 0.6rem;
				color: #333333;
				text-align: center;
				line-height: 2rem;
			}
			.popup-que{
				width: 5rem;
				height: 1.6rem;
				margin-left: 2rem;
				font-size:0.6rem;
				color: #333333;
				text-align: center;
				line-height:1.6rem;
				display: inline-block;
			}
			.popup-xiao{
				width: 5rem;
				height: 1.6rem;
				margin: 0 auto;
				font-size:0.6rem;
				color: #333333;
				text-align: center;
				line-height:1.6rem;
				display: inline-block;
			}
			.caitext{
				font-size:0.5rem;
				line-height: 0.6rem;
			}
			input[name="menulist"]{
				margin-top:0.3rem;
				font-size:0.5rem;
				line-height: 0.6rem;
				height: 0.7rem;
			}
			textarea{
				font-size:0.5rem;
				line-height: 0.6rem;
				height: 1.4rem;
			}
			.mui-table-view{
				font-size:0.6rem;
				line-height:1.6rem;
			}
			li .mui-badge{
				font-size:0.6rem;
			}
			#erweima{
				width: 100%;
				height: 80%;
				margin: 4rem auto;
				font-size: 0.6rem;
			}
			#erweima #back{
				width: 100%;
				height: 100%;
			}
			#erweima #erwei{
				position:absolute;
				top:5.45rem; 
				right:1.4rem; 
				width: 45%;
				height: 45%;
			}
			.erwei-msg p{
				line-height:1rem;
				font-size: 0.6rem;
			}
			.erwei-msg strong{
				color:red;
				font-size: 0.7rem;
			}
			.erwei-footer{
				margin-top:-1rem; 
			}
			.erwei-footer p{
				font-size: 0.4rem;
				text-align: right;
				line-height:1rem;
			}
			#querenbutton{
				font-size:0.6rem;
				margin-left:11rem;
				width: 3rem;
				height: 1.2rem;
			}
		</style>
	</head>
	<c:if test="${requestScope.error!=null }"><script type="text/javascript">$("#errorpopup").css("display","block");</script></c:if>
<body>
	<div id='header'>
   	  <div class="header-yi">
   	  	<a id="logout" href="javascript:void(0);"><img src="img/2452.png" alt="" /></a>
   	  </div>
   	  <div class="header-er">LeeSir点餐</div>
   	  <div class="header-san">
   	  	<a href="RestServlet?opr=index"><img src="img/174527.png" alt="" /></a>
   	  </div>
   </div>
   <div id="sectionss">
   <div id="main-body">
	<div class="tabs">
		<ul class="banner-er">
   	  	  	<li class="active">
   	  	  		<span>菜单管理</span>
   	  	  		<div></div>
   	  	  	</li>
   	  	  	<li>
   	  	  		<span>订单管理</span>
   	  	  		<div></div>
   	  	  	</li>
   	  	  	<li>
   	  	  		<span>生成二维码</span>
   	  	  		<div></div>
   	  	  	</li>
   	  	  </ul>
	 </div>
   <div id="tabs-container" class="swiper-container">
	  <div class="swiper-wrapper">
	    <div class="swiper-slide">
	    <div class="content-slide">
	    	<ul class="news-list">
	    	<c:forEach var="menu" items="${sessionScope.menu }">
		       	<li onclick="menudetil(${menu.menuID})"><strong>${menu.species }</strong><p>${menu.menuDescription }</p><img src="img/13645.png" alt="" /></li>
		    </c:forEach>
        	</ul>
        	<img class="addmenu" alt="" src="img/000.png">
   	   </div>
	    </div>
	    <div class="swiper-slide">
	    <div class="content-slide">
			 <ul class="mui-table-view"> <!-- 订单列表 -->
			 <c:forEach begin="1" end="${sessionScope.user.deskNum}" step="1" var="i">
			 	<li class="mui-table-view-cell mui-collapse">
		            <span class="mui-badge mui-badge-primary">1</span>
		            <a class="mui-navigate-right" href="#">${i}号桌</a>
		            <div class="mui-collapse-content">
	            		<ul  class="news-list">
			            	<%-- <c:choose>
	                           <c:when test="${sessionScope.orderTable!=null }">
					            	<c:forEach var="order" items="${sessionScope.orderTable }">
				            			<li>
				            				<span>${order. }</span><span>0</span>
				            			</li>
					            	
					            	</c:forEach>
	                           </c:when>
	                           <c:otherwise>
				            			<li>
				            				<span>暂无订单</span><span></span>
				            			</li>
	                           </c:otherwise>
                       		</c:choose> --%>
	            			<li>
	            				<span>菜名:</span><span>0</span>
	            			</li>
	            			<li>
	            				<span>菜名:</span><span>0</span>
	            			</li>
	            			<li>
	            				<span>菜名:</span><span>0</span>
	            			</li>
	            		</ul>
		                <button id="querenbutton" type="button" class="mui-btn mui-btn-outlined mui-btn-primary">确认订单</button>
		            </div>
		        </li>
			 </c:forEach>
		    </ul>
   	   </div>
		</div>
	    <div class="swiper-slide"><div class="content-slide"><!-- 餐馆二维码显示 -->
	    	<div id="erweima">
	    	<c:if test="${sessionScope.user!=null }">
	    		<div class="erwei-msg">
	    			<strong>提示：</strong><p>请将该二维码贴至每个餐桌上供顾客使用！</p>
	    		</div>
	    		<img id="back" alt="" src="img/erweima.jpg">
	    		<img id="erwei" alt="" src="ErweiImage">
	    		<div class="erwei-footer">
	    			<p>请用浏览器扫描该二维码获取该餐馆的菜单等信息！</p>
	    		</div>
	    	</c:if>
	    	</div>
	    </div>
	  </div>
	  </div>
	</div>
	</div>
	</div>
	<div id="menupopup"> <!--//添加菜单类型对话框-->
   	  <div id="popup-main">
   	  	 <div class="popup-head">
   	   	    <img src="img/9.png" alt="" />
   	   	    <span>添加菜单</span>
   	    </div>
   	    <form action="RestServlet?opr=menu" id="menusubform" method="post">
   	    <div class="popup-main">
   	   	   <label class="caitext">菜单类型：</label><input id="menulist" type="text" name="menulist" onfocus="javascript:this.placeholder=''"/>
   	   	   <label class="caitext">菜单描述：</label><textarea id="menudiscription" name="menudiscription" rows="2" cols="3" onfocus="javascript:this.placeholder=''"></textarea>
   	     </div>
   	   <div class="popup-que">确定</div><div class="popup-xiao">取消</div>
   	   </form>
   	  </div>
   </div>
   <div id="errorpopup"> <!--//错误提示框-->
   	  <div id="popup-main">
   	  	 <div class="popup-head">
   	   	    <img src="img/7.png" alt="" />
   	   	    <span>警告！</span>
   	    </div>
   	    <div class="popup-main">
   	   	   <ul>
   	   	  	<li id="error">${requestScope.error }</li>
   	   	   </ul>
   	     </div>
   	   <div class="popup-xiao">取消</div>
   	  </div>
   </div>
   <div id="logoutpopup"> <!--//退出提示框-->
   	  <div id="logout-main">
   	  	 <div class="logout-head">
   	   	    <img src="img/7.png" alt="" />
   	   	    <span></span>
   	    </div>
   	    <div class="logout-main">
   	   	   <ul>
   	   	  	<li>确认退出吗？</li>
   	   	   </ul>
   	     </div>
   	   <div class="popup-que">确定</div><div class="popup-xiao">取消</div>
   	  </div>
   </div>
	<script src="js/jquery-1.11.1.js" type="text/javascript"></script>
	<script src="js/mui.min.js" type="text/javascript"></script>
	<script src="js/swiper.js" type="text/javascript"></script>
	<script type="text/javascript">
	window.onload = function() {
		  var tabsSwiper = new Swiper('#tabs-container',{
		    speed:500,
		    onSlideChangeStart: function(){
		      $(".tabs .active").removeClass('active');
		      $(".tabs li").eq(tabsSwiper.activeIndex).addClass('active') ; 
		    }
		  })
		  $(".tabs li").on('touchstart mousedown',function(e){
		    e.preventDefault();
		    $(".tabs .active").removeClass('active');
		    $(this).addClass('active');
		    tabsSwiper.slideTo( $(this).index() );
		  })
		  $(".tabs li").click(function(e){
		    e.preventDefault();
		  })
		  
		};
		function menudetil(id){
			location.href="RestServlet?opr=menudetil&id="+id;
		}
	$(function(){
		$(".addmenu").click(function(){
			$("#menupopup").css("display","block");
		})
		$('.popup-xiao').click(function(){
			$('#menupopup').css('display','none');
			$('#errorpopup').css('display','none');
		})
		$('.popup-que').click(function(){
			if($("#menulist").val()!=null&&$("#menulist").val().trim()!=""){
			alert($("#menulist").val()+$("#menudescription").val());
				$("#menusubform").submit();
				$('#menupopup').css('display','none');
			}
		})
	   			$("#logout").click(function(){
	   				$("#logoutpopup").css("display","block");
	   			})
	   			$('.popup-xiao').click(function(){
	   				$('#logoutpopup').css('display','none');
	   			})
	   			$('.popup-que').click(function(){
	   				$.ajax({
	   					url:"UserServlet?mark=logout",
	   					type:"get",
	   					success:function(data){
	   						if("success"==data){
	   							mui.toast('<span style="font-size:0.4rem;">退出成功！</span>',{ duration:'short', type:'div' }) ;
	   							$('#logoutpopup').css('display','none');
	   						}else{
	   							mui.toast('<span style="font-size:0.4rem;">您还未登录，不能进行退出！</span>',{ duration:'short', type:'div' }) ;
	   						}
	   					}
	   				});
	   			})
	});
	</script>
</body>
</html>